<!--
 * @FileDescription: 店铺详细界面
 * @Author: yijiamu
 * @Date: 2022-05-09 09:45:16
 * @LastEditors: yijiamu
 * @LastEditTime: 2022-05-09 09:45:16
 -->
<template>
  <body>
  <div class="background" ref="banner">
    <img src="../../assets/banner.jpeg">
    <div style="height: 6em; background-color: #ffffff;"></div>
  </div>
  <header>
    <div class="go-back" id="go-back" ref="header">
      <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
      <i class="el-icon-more"></i>
    </div>
  </header>
  <div class="shop" >
    <div class="shop-container">
      <h2 class="shop-title" >
        {{ this.shopDetailData.name}}
      </h2>
      <img :src="imgBaseUrl + shopDetailData.image_path" class="shop-cover"></img>

      <div class="shop-info">
        <span class="shop-score">
                {{ this.shopDetailData.rating }}分
        </span>
        <span class="shop-time">
            蜂鸟专送 {{ this.shopDetailData.float_minimum_order_amount }}分钟送到
        </span>
        <span class="shop-sales">
                月售{{ this.shopDetailData.rating_count }}
            </span>
      </div>
      <div class="shop-message">
        {{ this.shopDetailData.promotion_info }}
      </div>
      <div class="shop-bread">
        <li class="bread" v-for="(item,index) in this.shopDetailData.supports ">{{ item.name }}</li>
      </div>
    </div>
  </div>
  <nav class="order-evaluate" ref="topNav">
    <span :class="[{'title':true},{ active:behavior === 1}]" @click="changeBehavior($event)">点餐<i class="el-icon-upload2" v-show="behavior === 1"></i></span>
    <span :class="[{'title':true},{ active:behavior === 2}]" @click="changeBehavior($event)">评价<i class="el-icon-upload2"  v-show="behavior === 2"></i></span>
    <span :class="[{'title':true},{ active:behavior === 3}]" @click="changeBehavior($event)">商家<i class="el-icon-upload2"  v-show="behavior === 3"></i></span>
  </nav>
<!--  点餐-->
  <div class="list-container" v-show="behavior === 1">
    <div class="type-list-container">
      <nav class="type-list" >
        <li class="type-item" v-for="(item,index) in this.foodList" @click="scrollToItem(index)">
          <dd class="type-title">{{ item.name }}</dd>

        </li>
      </nav>
    </div>
    <nav class="goods-list">
      <li v-for="(foodItem,index) in this.foodList" :key="foodItem.id">
        <strong class="food-item-title" :id="'li' + (index + 1)">{{foodItem.name}}</strong>
        <span class="food-item-info" :id="'li' + (index + 1)">{{foodItem.description}}</span>
        <ol class="goods-item active" v-for="(food,index) in foodItem.foods" :key="food.item_id">
          <img class="goods-cover" :src="imgBaseUrl + food.image_path">
          <div class="goods-info">
            <h2 class="info-title">{{ food.name }}</h2>
            <p class="info-details">{{ food.description }}</p>
            <div class="sales-score">
              <p class="info-sales">月售{{food.month_sales}}</p>
              <p class="info-score">好评率{{ food.satisfy_rate }}%</p>
            </div>
            <div class="info-bread" v-for="(active,index) in food.activity" :key="index">
              <p class="bread" v-if="index === 'image_text'">{{ active }}</p>
            </div>
            <div class="value">
              <p class="info-icon">￥<span class="info-value">18</span></p>
<!--              <buy-cart-com :restaurant_id='restaurant_id' :food='food'></buy-cart-com>-->
              <div class="info-count">
                <i class="el-icon-remove-outline"
                   @click="removeCart(food.category_id, food.item_id, food.specfoods[0].food_id)"
                   v-if="getNum(food.specfoods[0].item_id,food.specfoods[0].food_id) !== 0"></i>
                <!--      <p class="number" v-if="foodNum !== 0">{{ foodNum }}</p>-->
                <p class="number" v-if="getNum(food.specfoods[0].item_id,food.specfoods[0].food_id) !== 0">{{getNum(food.specfoods[0].item_id,food.specfoods[0].food_id)}}</p>
                <i class="el-icon-circle-plus-outline"
                   @click="addCart(
                 food.category_id,food.item_id,food.specfoods[0].food_id,food.image_path,
                 food.specfoods[0].name,food.specfoods[0].price,'',food.specfoods[0].packing_fee,
                 food.specfoods[0].sku_id,food.specfoods[0].stock,$event)"
                   v-if="getNum(food.specfoods[0].item_id,food.specfoods[0].food_id) !== 0"></i>
                      <i class="el-icon-circle-plus"
                         @click="addCart(
                 food.category_id,food.item_id,food.specfoods[0].food_id,food.image_path,
                 food.specfoods[0].name,food.specfoods[0].price,'',food.specfoods[0].packing_fee,
                 food.specfoods[0].sku_id,food.specfoods[0].stock,$event)"
                         v-if="getNum(food.specfoods[0].item_id,food.specfoods[0].food_id) === 0"></i>
              </div>
            </div>
          </div>
        </ol>
      </li>
    </nav>
  </div>
<!--  评价-->
  <div class="remark-container" v-show="behavior === 2 ">
      <section class="global-evaluate">
        <section class="evaluate">
          <section class="global-score">
            <div class="score">{{ shopDetailData.rating }}</div>
            <div class="score-describe">
              <span class="message">高于附件{{Number(ratingScore.compare_rating*100).toFixed(1)}}%的商家</span>
            </div>
          </section>
          <section class="detail-score">
            <div class="service item">
              <span class="title">服务</span>
              <span class="score">{{ Number(ratingScore.service_score).toFixed(1)}}</span>
            </div>
            <div class="taste item">
              <span class="title">菜品</span>
              <span class="score">{{ Number(ratingScore.food_score).toFixed(1)}}</span>
            </div>
            <div class="time item">
              <span class="title">配送时间</span>
              <span class="score">{{Number( ratingScore.deliver_time).toFixed(0) }}分钟</span>
            </div>
          </section>
        </section>
        <section class="crumbs" id="tags">
          <span
            class="crumb"
            v-for="(item,index) in ratingTagsList"
            :key="index"
            @click="choiceTag($event,item)">{{ item.name }} {{item.count}}</span>

        </section>
      </section>
      <section class="evaluate-container" v-for="(mark,index) in ratingList" :key="index">
        <div class="evaluate-item">
          <section class="user">
            <img :src="getImgPath(mark.avatar)" class="user-cover">
            <div class="user-info">
              <span class="user-name">{{ mark.username }}</span>
              <span class="date">{{ mark.rated_at }}</span>
            </div>
          </section>
          <p class="remark" v-if="mark.time_spent_desc">
            {{ mark.time_spent_desc }}
          </p>
          <p class="remark" v-else>
            此用户没有填写评价。
          </p>
          <section class="covers">
            <img class="cover"
                 v-for="(item,index) in mark.item_ratings"
                 :key="index"
                 :src="getImgPath(item.image_hash)"
                 v-if="item.image_hash">
          </section>
          <section class="crumbs">
            <span
              class="crumb"
              v-for="(item,index) in mark.item_ratings"
              :key="index">{{ item.food_name }}</span>
          </section>
        </div>
      </section>
  </div>
<!--  商家-->
  <div class="shop-container" v-show="behavior === 3 ">
    <div class="shop-cover">
      <img class="cover" :src="imgBaseUrl + shopDetailData.image_path">
      <div class="mask"></div>
      <span class="message">{{ shopDetailData.promotion_info }}</span>
    </div>
    <div class="shop-adress">
      <div class="adress">
        <span class="title">{{ shopDetailData.name }}</span>
        <span class="detail"><i class="el-icon-location-outline"></i>{{ shopDetailData.address }}</span>
      </div>
      <a class="call-phone" href="tel:13663030126"><i class="el-icon-phone-outline"/></a>
    </div>
    <div class="shop-message">
      <span class="title">商店信息</span>
      <span class="category">商家品类：{{ shopDetailData.category }}</span>
      <span class="time" v-for="(time,index) in shopDetailData.opening_hours":key="index">营业时间：{{ time }}</span>
    </div>
    <div class="shop-serve">
      <span class="title">商店服务</span>
      <div class="serve" v-for="(item,index) in shopDetailData.supports" :key="index">
        <span class="serve-name">{{item.name}}</span>
        <span class="serve-detail">{{ item.description }}</span>
      </div>
    </div>
  </div>
<!--  购物车-->
  <cartCom v-show="behavior !== 3 " :restaurant_id="restaurant_id" :currentCartList="currentCartList"></cartCom>
  </body>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator';
import {IfoodList, IrateList, IrateScore, IrateTag} from "@/api/config/responseType";
import {getImgPath} from '@/utils/utils';
import {AxiosError, AxiosResponse} from "axios";
import { reqFoodList } from "@/api/food";
import { reqMsiteAddress } from '@/api/city';
import { ratingTags, reqRatingList, reqRatingScores, reqShopDetails} from "@/api/shop";
import {Getter, Mutation, State} from 'vuex-class';
import {IcartInfo} from "@/store/types";
import {toNumber} from "lodash";
import {IcartList} from "@/utils/utilsType";
const namespace = "profile"
@Component({})
export default class shopCom extends Vue {
  @State('cartList',{ namespace }) cartList !: any;
  @Mutation('ADD_CART', { namespace }) ADD_CART: any
  @Mutation('REDUCE_CART', { namespace }) REDUCE_CART: any
  private imgBaseUrl = "//elm.cangdu.org/img/" as string; //图片源地址
  private restaurant_id !: string | (string | null)[]; //饭馆的ID
  private geohash = '' as string | (string | null)[] ; //定位
  private behavior = 1 as number | undefined //点击事件的序号
  private ratingOffset = 0 as number; //评论跳过几条
  private foodList = [] as IfoodList[];  //食品详细的分类以及item
  private shopDetailData = [] as any; //商铺详细信息
  private ratingList = [] as IrateList[]; //评论列表
  private ratingScore = {} as IrateScore; //评价的分数
  private ratingTagsList = [] as IrateTag[];  //评价分类列表
  private currentCartList = [] as IcartList[] ;  //评价分类列表
  beforeMount(){
    this.geohash = this.$route.query.geohash;
    this.restaurant_id = this.$route.query.id;
    this.initData();
  }
/**
  * @description: 获得照片路径
  * @return {}
  */
  getImgPath(path:string){
    return getImgPath(path);
  }
/**
  * @description: 初始化时获取基本数据
  * @return {}
  */
  async initData(){
    if (!this.geohash) {
      //获取位置信息
      await reqMsiteAddress(this.geohash).then((res:AxiosResponse)=>{
        // 记录当前经度纬度进入vuex
        this.$store.commit('RECORD_ADDRESS',res.data);
      },(err:AxiosError)=>{
        console.log(err)
      })
    }
    //获取商铺信息
    await reqShopDetails({
      restaurant_id: this.restaurant_id,
      geohash: this.geohash,
    }).then((res:AxiosResponse)=>{
      this.shopDetailData = res.data
    },(err:AxiosError)=>{
      console.log(err)
    });
    //获取商铺食品列表
    await reqFoodList({restaurant_id:this.restaurant_id}).then((res:AxiosResponse)=>{
      this.foodList = res.data
    },(err:AxiosError)=>{
      console.log(err)
    })
    //评论列表
    await reqRatingList({
      restaurant_id: this.restaurant_id ,
      offset: this.ratingOffset,
      tag_name: '',
      limit: 20,
    }).then((res:AxiosResponse)=>{
      this.ratingList = res.data;
    },(err:AxiosError)=>{
      console.log(err)
    })
    //商铺评论分数
    await reqRatingScores(this.restaurant_id).then((res:AxiosResponse)=>{
      this.ratingScore = res.data;
    },(err:AxiosError)=>{
      console.log(err)
    })
    //评论Tag列表
    await ratingTags(this.restaurant_id).then((res:AxiosResponse)=>{
      this.ratingTagsList = res.data;
    },(err:AxiosError)=>{
      console.log(err)
    })
    // this.RECORD_SHOPDETAIL(this.shopDetailData)
    // //隐藏加载动画
    // this.hideLoading();
  }
/**
 * @description: 侧边跳转食品的分类
 * @return {}
 * @param index 分类的ID
 */
  scrollToItem(index:number){
    window.location.hash= '#li'+(index+1);
    // console.log(index);
  }
/**
 * @description: 切换点餐和评价的菜单
 * @return {}
 * @param event 点击的位置
 */
  changeBehavior(event:any){
    let target = undefined ;
    if(event.target.innerText.match('点餐')){
      target = 1;
    }else if(event.target.innerText.match('评价')){
      target = 2;
    }else {
      target = 3;
    }
    if(target === this.behavior){
      this.toTop();
    }else{
      this.behavior = target;
    }
  }
/**
 * @description: 滑动到最顶
 * @return {}
 */
  private toTop(){
    window.scrollTo({
      left: 0,
      top: 0,
      behavior: 'smooth'
    })
  }
/**
 * @description: 点击Tag事件
 * @return {}
 * @param $evebt
 * @param item
 */
  private async choiceTag(event:any ,item: IrateTag){
    await reqRatingList({
      restaurant_id: this.restaurant_id,
      offset: this.ratingOffset,
      tag_name: item.name,
      limit: 20,
    }).then((res:AxiosResponse)=>{
      this.ratingList = res.data;
    },(err:AxiosError)=>{
      console.log(err);
    })
    let target = event.target;
    let tags = document.querySelectorAll('.global-evaluate > .crumbs >.crumb');
    tags.forEach((item)=>{
      item.classList.remove('active')
    })
    target.classList.add('active');
    // target.classList.remove('active')
  }
/**
 * @description: 添加购物车操作
 * @return {}
 */
  addCart(category_id:number, item_id: number, food_id:number, food_img:string,name: string, price:number,specs: string, packing_fee:number, sku_id: number, stock:number , event:any){
    //下面是往Vuex里面存数据，因为VueX管理的是整个页面的数据，所以需要进行更多的参数用来构造结构
    this.ADD_CART({restaurant_id: this.restaurant_id, category_id, item_id, food_id, food_img,name, price, specs, packing_fee, sku_id, stock});
    //但是currentCartList是不需要的，因为这个参数只在这里以及cartCom里面用，用的时候是只需要知道item层
    //向buyCartCom 传输数据
    let currentCart = {
      "item_id": item_id,
      "num" : 1,
      "id" : food_id,
      "img" : food_img,
      "name" : name,
      "price" : price,
      "specs" : specs,
      "packing_fee" : packing_fee,
      "sku_id" : sku_id,
      "stock" : stock
    } as IcartList;
    if(this.isInCurrentCartList(this.currentCartList,currentCart.item_id,currentCart.id)){
      this.currentCartList.forEach((item)=>{
        if(item.item_id == currentCart.item_id && item.id == currentCart.id){
          item.num += 1;
        }
      })
    }else{
      this.currentCartList.push(currentCart)
    }
    // let elLeft = event.target.getBoundingClientRect().left;
    // let elBottom = event.target.getBoundingClientRect().bottom;
    // this.showMoveDot.push(true);
    // this.$emit('showMoveDot', this.showMoveDot, elLeft, elBottom);
  }
/**
 * @description: 移除购物车操作
 * @return {}
 */
  removeCart(category_id:number, item_id: number, food_id:number){
    // if (this.foodNum > 0) {
    // console.log({category_id, item_id, food_id})
    //送至Vuex
    this.REDUCE_CART({restaurant_id:this.restaurant_id,category_id, item_id, food_id});
    //送至this.currentCartList
    if(this.isInCurrentCartList(this.currentCartList,item_id,food_id)){
      this.currentCartList.forEach((item:IcartList)=>{
        if(item.item_id == item_id && item.id == food_id){
          item.num -= 1;
        }
        if(item.num === 0){
          this.currentCartList.splice(this.currentCartList.indexOf(item),1)
        }
      })
    }
    // }
  }
/**
  * @description: 判断目标是否在数组里
  * @return {boolean}
  * @param list target
  */
  isInCurrentCartList(list:any,target_item_id:number,target_id:number){
    return list.some((item:any)=>item.item_id == target_item_id && item.id == target_id)
  }
  // get shopCart(){
  //   return Object.assign({},this.cartList[toNumber(this.restaurant_id)]);
  // }
/**
  * @description:获取每个食物的数量
  * @return {number}
  */
  getNum(item_id:number,food_id:number){
    if(this.isInCurrentCartList(this.currentCartList,item_id,food_id)){
      return this.currentCartList.filter((item:IcartList)=>{
          return item.item_id == item_id && item.id == food_id
        })[0].num;
    }else{
      return 0;
    }
    // let category_id = this.foods.category_id;
    // let item_id = this.foods.item_id;
    // if (this.shopCart&&this.shopCart[category_id]&&this.shopCart[category_id][item_id]) {
    //   let num = 0;
    //   Object.values(this.shopCart[category_id][item_id]).forEach((item,index) => {
    //     num += item.num;
    //   })
    //   return num;
    // }else {
    //   return 0;
    // }
  }
}

</script>

<style scoped lang="less">
body {
  background-color: #fbfbfb;
  height: 100%;
  ul,ol,li {
    list-style: none;
  }
  a {
    text-decoration: none;
    color: black;
  }
  .router-link-active {
    text-decoration: none;
    color: black;
  }
  position: relative;
  //background-color: #fbfbfb;
  font-size: 14px;
  .background {
    img {
      width: 100%;
      height: 160px;
    }
  }
  header {
    z-index: 999;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;

    position: relative;
    .go-back {
      background-color: #fbfbfb;
      width: 100%;
      height: 3vh;
      padding: 1em 0;
      display: flex;
      justify-content: space-between;
      position: fixed;
      top: 0;
      .el-icon-arrow-left {
        font-size: 1.8em;
        margin-left: 0.5em;
      }
      .el-icon-more {
        font-size: 1.8em;
        margin-right: 0.5em;
      }
    }
  }
  .shop{
    width: 100%;
    position: absolute;
    top: 54px;
    display: flex;
    justify-content: center;
    .shop-container {
      margin: 1em;
      z-index: 1;
      padding: 1em 1em;
      background-color: #fbfbfb;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      width: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 10px;
      .shop-title {
        margin: 0.4em 0 ;
      }
      .shop-cover {
        min-width: 85px;
        min-height: 85px;
        max-width: 141px;
        max-height: 141px;
        margin-top: 2vh;
        margin-right: 1vw;
        border-radius: 10px;
        position: absolute;
        top: 10px;
        right: 20px;
        width: 16vw;
        height: 16vw;
      }
      .shop-info {
        margin: 0.4em 0 ;
        white-space: nowrap;
        width: 60vw;
        overflow: hidden;
        text-overflow:ellipsis;
        .shop-score {
          font-weight: bold;
          color: #f09350;
        }
        .shop-time {
          padding-left: 0.5em;
        }
         .shop-sales {
           padding-left: 0.5em;
         }
      }
      .shop-message {
        color: #a1a1a1;
        margin: 0.4em 0 ;
        //height: 1.5em;
        //display: inline-block;
        white-space: nowrap;
        width: 60vw;
        overflow: hidden;
        text-overflow:ellipsis;
      }
      .shop-bread {
        display: flex;
        flex-wrap: wrap;
        margin: 0.4em 0 ;
        .bread {
          font-size: 10px;
          margin: 2px 6px 2px 0;
          text-align: center;
          padding: 0.2em 0.4em;
          color: #ec6047;
          border: 0.5px #ec6047 solid;
          border-radius: 4px;
          list-style: none;
        }
      }
    }
  }
  //nav order-evaluate
  .order-evaluate {
    //position: relative;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 5vh;
    display: flex;
    justify-content: flex-start;
    padding: 1vw ;
    z-index: 4;
    background-color: #fbfbfb;
    .title {
      display: flex;
      align-items: center;
      font-size: 20px;
      margin: 2vw 9vw 2vw 6vw;
      .el-icon-upload2 {
        margin-left: 8px;
        font-size: 16px;
        border-radius: 50%;
        padding: 3px;
        background-color: #eeeeee;
        color: #d5d5d5;
        pointer-events: none;
      }
    }
    .active {
      font-weight: bold;
    }
  }

  .list-container {
    display: flex;
    padding: 0;
    background-color: #fbfbfb;
    .type-list-container {
      width: 20vw;
      margin-right: 1vw;
      background-color: #f2f2f2;
      .type-list {
        height: 100vh;
        overflow: auto;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 30vw;
        margin: 1vw ;
        z-index: 4;
        left: 0;
        //width: 20vw;
        display: flex;
        flex-direction: column;
        .type-item {
          //max-width: 100px;
          width: 100%;
          text-align: center;
          min-width: 60px;
          list-style: none;
          padding: 4vw 0vw 4vw 0vw;
          background-color: #f2f2f2;
          //white-space: nowrap;
          //overflow: hidden;
          .type-title {
            width: 5em;
            margin: 0;
            text-overflow: ellipsis;
            white-space: break-spaces;
            overflow: hidden;
          }
        }
        .active {
          background-color: #ffffff;

        }
      }
    }
    .goods-list {
      display: flex;
      flex-direction: column;
      width: 76vw;
      .food-item-title {
        font-size: medium;
        margin-left: 1em;
      }
      .food-item-info {
        margin-left: 1em;
        font-size: small;
        color: #c1c1c1;
      }
      .goods-item {
        display: flex;
        list-style: none;
        padding: 0.6em ;
        margin-bottom: 0.4em;
        .goods-cover {
          width: 96px;
          height: 96px;
          border-radius: 6px;
        }
        .goods-info {
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          .info-title{
            text-overflow: ellipsis;
            max-width: 10em;
            white-space: normal;
            overflow: hidden;
            font-size: medium;
            margin: 0 0 2px 0;
          }
          .info-details{
            font-size: small;
            color: #9e9e9e;
            margin: 2px 0;
            height: 1.5em;
            display: inline-block;
            white-space: nowrap;
            width: 45vw;
            overflow: hidden;
            text-overflow:ellipsis;
          }
          .sales-score {
            font-size: small;
            width: 45vw;
            display: flex;
          }
          .info-sales {
            font-size: small;
            margin: 1px 8px 1px 0;
            color: #9e9e9e;
            display: inline-block;
          }
          .info-score {
            margin: 1px 0;
            color: #9e9e9e;
            display: inline-block;
          }
          .info-bread {
            max-width: 90%;
            display: flex;
            flex-wrap: wrap;
            margin: 1px 0;
            .bread {
              font-size: small;
              font-weight: lighter;
              margin: 0;
              text-align: center;
              padding: 2px 6px  ;
              //width: 4em;
              color: #ec6047;
              border: 0.5px #ec6047 solid;
              border-radius: 8px;
            }
          }
          .value {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .info-icon {
              display: inline-flex;
              align-items: baseline;
              margin: 2px 0;
              font-size: medium;
              color: #eb5940;
              .info-value {
                margin: 2px 0;
                font-size: large;
                font-weight: bold;
                color: #eb5940;
              }
            }
            .info-count {
              text-align: center;
              display: inline-flex;
              align-items: center;
              .el-icon-remove-outline {
                color: #55b5f7;
                font-size: 2em;
              }
              .el-icon-circle-plus-outline {
                font-size: 2em;
                color: #55b5f7;
              }
              .el-icon-circle-plus {
                font-size: 2em;
                color: #55b5f7;
              }
              .number {
                color: #55b5f7;
                margin: 0 6px;
                font-size: 1em;
              }
            }
          }
        }
      }
      .active {
        background-image: linear-gradient(to right, #ffffff , #fdf6e0);
      }
    }
  }

  .remark-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f5f5;
    //margin: 0 5vw;
    .global-evaluate {
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
      border-radius: 12px;
      margin: 4vw 2vw 2vw 2vw;
      padding: 5vw;
      width: 86%;
      .evaluate {
        //width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .global-score {
          display: flex;
          align-items: center;
          .score {
            //float: left;
            color: #ed6d2c;
            font-size: xx-large;
            margin: 0 1vw ;
          }
          .score-describe {
            display: flex;
            flex-direction: column;
            .message {
              float: top;
              color: #a0a0a0;
              font-size: 12px;
            }
            .stars {
              margin-top: 1vw;
              float: bottom;
            }
          }
        }
        .detail-score {
          //float: right;
          margin-left: 6vw;
          display: flex;
          .item {
            margin: 0 1vw;
            display: flex;
            flex-direction: column;
            align-items: center;
          }
          .title {
            float: top;
            color: #a0a0a0;
            font-size: 12px;
          }
          .score {
            margin-top: 1vw;
            font-size: medium;
            font-weight: bold;
          }
        }
      }
      .crumbs {
        display: flex;
        flex-wrap: wrap;
        margin-top: 3vw;
        .crumb {
          font-size: small;
          padding: 0.5em 0.8em;
          margin: 0.3em 0.4em;
          border-radius: 6px;
          color: #232323;
          background-color: #f3f3f3;
        }
        .active {
          color: #4fabeb;
          background-color: #e9f7fe;
          font-weight: bold;
        }
      }
    }
    .evaluate-container {
      margin: 2vw;
      width: 86%;
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
      border-radius: 12px;
      //margin: 2vw;
      padding: 5vw;
      .evaluate-item {
        display: flex;
        flex-direction: column;
        .user {
          display: flex;
          .user-cover {
            width: 2.5em;
            height: 2.5em;
            border-radius: 50%;
          }
          .user-info {
            display: flex;
            flex-direction: column;
            margin-left: 3vw;
            .user-name {
              color: #2b2b2b;
            }
            .date {
              margin-top: 1vw;
              color: #9c9c9c;
              font-size: small;
            }
          }
        }
        .remark {

        }
        .covers {
          display: flex;
          .cover {
            margin-right: 4vw;
            border-radius: 8px;
            width: 36vw;
            height: 36vw;
          }
        }
        .crumbs {
          display: flex;
          flex-wrap: wrap;
          margin-top: 2vw;
          .crumb {
            white-space: normal;
            overflow: hidden;
            text-overflow:ellipsis;
            font-size: small;
            padding: 0.5em 1em;
            margin: 0.2em 0.2em;
            border-radius: 6px;
            color: #232323;
            background-color: #f3f3f3;
          }
        }
      }
    }
  }

  .shop-container {
    background-color: #fbfbfb;
    display: flex;
    flex-direction: column;
    margin:  0 4vw ;
    padding-bottom: 2vh;
    ul,ol,li {
      list-style: none;
    }
    a {
      text-decoration: none;
      color: black;
    }
    .shop-cover {
      position: relative;
      display: flex;
      justify-content: center;
      margin: 4vw 0 ;
      .cover {
        width: 92vw;
        height: 56vw;
        border-top-right-radius: 12px;
        border-top-left-radius: 12px;
      }
      .mask {
        position: absolute;
        width: 92vw;
        height: 56vw;
        background-image: linear-gradient(#ffffff, #363535);
        border-top-right-radius: 12px;
        border-top-left-radius: 12px;
        opacity: 0.4;
      }
      .message {
        position: absolute;
        left: 0;
        bottom: 0;
        color: #faf9f8;
        font-size: small;
        margin-bottom: 1em;
        margin-left: 1em;
      }
    }
    .shop-adress {
      display: flex;
      margin: 2vw 0 4vw 0;
      justify-content: space-between;
      align-items: center;
      .adress {
        display: flex;
        flex-direction: column;
        .title {

          font-size: 15px;
          font-weight: bolder;
          margin: 1vw 0;
        }
        .detail {
          font-size: 14px;
          color: #747474;
          margin: 1vw 0;
          width: 20em;
          .el-icon-location-outline {
            font-size: 16px;
            font-weight: bold;
            color: black;
            margin-right: 1vw;
          }
        }
      }
      .call-phone {
        margin-right: 24px;
        .el-icon-phone-outline {
          font-size: 36px;
          color: #53b5f3;
        }
      }
    }
    .shop-message {
      display: flex;
      flex-direction: column;
      margin: 4vw 0 ;
      .title {
        font-size: 15px;
        font-weight: bolder;
        margin: 1vw 0;
      }
      .category , .time{
        font-size: 14px;
        color: #747474;
        margin: 1vw 0;
      }
    }
    .shop-serve {

      display: flex;
      flex-direction: column;
      margin: 4vw 0 ;
      .title {
        font-size: 15px;
        font-weight: bolder;
        margin-bottom: 1vw;
      }
      .serve {
        margin: 1vw 0;
        display: flex;
        align-items: center;
        .serve-name {
          font-size: 12px;
          font-weight: lighter;
          color: #747474;
          border: #9e9e9e 1px solid;
          border-radius: 0.5em;
          padding: 0.2em 0.4em;
        }
        .serve-detail{
          margin-left: 2vw;
          font-size: 12px;
          color: #747474;
        }
      }
    }
  }
}
</style>
